<template>
  <div class="inventory-check-container">
    <h1>库存盘点</h1>
    <!-- 筛选部分 -->
    <div class="filter-section">
      <el-input v-model="filter.checkNumber" placeholder="请输入盘点单号"></el-input>
      <el-select v-model="filter.store" placeholder="请选择门店">
        <el-option v-for="store in stores" :key="store" :label="store" :value="store"></el-option>
      </el-select>
      <el-button @click="queryCheckRecords">查询</el-button>
    </div>
    <!-- 数据列表部分 -->
    <div class="data-list-section">
      <el-button @click="addCheckRecord">新增盘点单</el-button>
      <el-table :data="checkRecords" stripe>
        <el-table-column prop="checkNumber" label="盘点单号"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="creator" label="制单人"></el-table-column>
        <el-table-column prop="store" label="所属门店"></el-table-column>
        <el-table-column prop="createTime" label="制单时间"></el-table-column>
        <el-table-column prop="auditor" label="审核人"></el-table-column>
        <el-table-column prop="auditStatus" label="审核状态"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.auditStatus === '待审核'" @click="auditRecord(scope.row.checkNumber)">审核</el-button>
            <el-button v-if="scope.row.auditStatus === '待审核' || scope.row.auditStatus === '审核失败'" @click="editRecord(scope.row.checkNumber)">修改</el-button>
            <el-button v-if="scope.row.auditStatus === '待审核' || scope.row.auditStatus === '审核失败'" @click="deleteRecord(scope.row.checkNumber)">删除</el-button>
            <el-button v-if="scope.row.auditStatus === '审核成功'" @click="viewDetails(scope.row.checkNumber)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalItems"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 筛选条件
const filter = ref({
  checkNumber: '',
  store: ''
});

// 门店列表
const stores = ref(['大悦城店', '西单店', '泛海国际店']);
// 盘点记录数据
const checkRecords = ref([
  {
    checkNumber: 'PD001',
    type: '日常盘点',
    creator: '张三',
    store: '大悦城店',
    createTime: '2024-01-01',
    auditor: '李四',
    auditStatus: '待审核'
  },
  {
    checkNumber: 'PD002',
    type: '月度盘点',
    creator: '王五',
    store: '西单店',
    createTime: '2024-01-02',
    auditor: '赵六',
    auditStatus: '审核成功'
  },
  {
    checkNumber: 'PD003',
    type: '年度盘点',
    creator: '孙七',
    store: '泛海国际店',
    createTime: '2024-01-03',
    auditor: '周八',
    auditStatus: '审核失败'
  }
]);
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(10);
// 总条目数
const totalItems = ref(checkRecords.value.length);
// 总页数
const totalPages = ref(Math.ceil(totalItems.value / pageSize.value));

// 查询盘点记录
const queryCheckRecords = () => {
  // 这里后续添加请求后端接口的代码
  console.log('查询盘点记录，筛选条件：', filter.value);
};

// 新增盘点单
const addCheckRecord = () => {
  // 这里后续添加新增盘点单的代码
  console.log('新增盘点单');
};

// 审核记录
const auditRecord = (checkNumber) => {
  // 这里后续添加审核记录的代码
  console.log('审核盘点记录，单号：', checkNumber);
};

// 修改记录
const editRecord = (checkNumber) => {
  // 这里后续添加修改记录的代码
  console.log('修改盘点记录，单号：', checkNumber);
};

// 删除记录
const deleteRecord = (checkNumber) => {
  // 这里后续添加删除记录的代码
  console.log('删除盘点记录，单号：', checkNumber);
};

// 查看详情
const viewDetails = (checkNumber) => {
  // 这里后续添加查看详情的代码
  console.log('查看盘点记录详情，单号：', checkNumber);
};

// 处理每页数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  totalPages.value = Math.ceil(totalItems.value / pageSize.value);
  queryCheckRecords();
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  queryCheckRecords();
};
</script>

<style scoped>
.inventory-check-container {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.data-list-section button {
  margin-bottom: 10px;
}

.pagination-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>